<template>
  <div
    :style="{ marginTop: top + 'px' }"
    class="column"
    style="margin-bottom: 0.3rem"
  >
    <van-image
      :src="resource.empty"
      webp
      style="width: 2.6rem; height: 1.8rem"
      :style="{ opacity: light ? 0.6 : 0.3 }"
    />
    <div
      class="fz28"
      :class="[light ? 'color-1' : 'color-888']"
      style="margin-top: 0.2rem"
    >
      {{ title }}
    </div>
  </div>
</template>

<script>
import resource from "@/utils/resource";

export default {
  props: {
    top: {
      default: 52,
      type: Number,
    },
    title: {
      default: "暂无数据",
      type: String,
    },
    light: {
      default: false,
      type: Boolean,
    },
  },
  data() {
    return {
      resource,
    };
  },
};
</script>
<style scoped>
.color-888 {
  color: #888888;
}
.color-1 {
  color: #333;
}
</style>